<template>
  <div class="flowpath-container">
    <div>
      <div class="flex_align">
        <div class="mb20 mt20">
          <span class="color_494949 ft12 pr5">关键字：</span>
          <el-input
            v-model="searchInfo"
            class="w164 mr10"
            placeholder="请输入关键字"
          />
        </div>
        <div class="mb20">
          <span class="color_494949 ft12 pr5">处理状态：</span>
          <el-select v-model="status" class="w200 mr10" placeholder="请选择">
            <el-option
              v-for="item in statusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- <el-checkbox v-model="IsSelfAudit" class="mr10">
            自己审核通过的记录
          </el-checkbox>
          <el-checkbox v-model="NoReadOrDo" class="mr10">
            待阅或待处理的记录
          </el-checkbox> -->
          <el-button class="settingBtn mr10" type="primary" @click="getList">
            查询
          </el-button>
        </div>
      </div>
      <el-table :data="tableData" :loading="loading">
        <el-table-column label="消息类别" prop="TaskType" />
        <el-table-column label="消息名称" prop="TaskName" />
        <el-table-column label="消息标题" prop="TaskMessage" width="200" />
        <el-table-column label="阅读状态">
          <template #default="{ row }">
            <div>
              {{ row.IsSeen ? '已读' : '未读' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="处理状态" prop="Supplier">
          <template #default="{ row }">
            <div>
              {{ row.IsDone ? '已处理' : '待处理' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="消息内容"
          prop="TaskContent"
          show-overflow-tooltip
        />
        <el-table-column
          label="处理人"
          prop="DoneUserName"
          show-overflow-tooltip
        />
        <el-table-column
          label="处理时间"
          prop="DoneDate"
          show-overflow-tooltip
        />
        <el-table-column
          label="流程申请用户"
          prop="PostUserName"
          show-overflow-tooltip
        />
        <el-table-column label="时间" prop="CreateDate" show-overflow-tooltip />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button
              v-if="MenuAuths('detail')"
              link
              size="small"
              type="primary"
              @click="detailFn(row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { GetTaskListData } from '@/api/form'
  import { MenuAuth } from '~/src/utils/permission'
  export default defineComponent({
    name: 'Flowpath',
    data() {
      return {
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        layout: 'total, sizes, prev, pager, next, jumper',
        IsDone: false,
        IsSeen: false,
        NoReadOrDo: false,
        IsSelfAudit: false,
        status: -1,
        statusArr: [
          {
            label: '全部',
            value: -1,
          },
          {
            label: '待处理',
            value: 0,
          },
          {
            label: '已处理',
            value: 1,
          },
        ],
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      this.getList()
    },
    methods: {
      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          total: 0,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            { name: 'TaskName', value: this.searchInfo, displayType: 'like' },
            {
              name: 'IsDone',
              value: this.status === 1 || this.status === 0 ? this.status : '',
              displayType: 'Equal',
            },
          ]),
          export: false,
          value: '',
        }
        const data = await GetTaskListData(params)
        if (data.code === '200') {
          this.tableData = data.data.rows
          this.total = data.data.total
        }
      },
      detailFn(row) {
        this.$router.push({
          path: '/table/detail',
          query: {
            formId: row.FormDataId,
            formcode: row.WorkFlowCode,
          },
        })
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }

    .iconcommon {
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 60px;
      color: blue;
    }
    .iconcommon2 {
      position: absolute;
      top: 80px;
      right: 70px;
      font-size: 60px;
      color: red;
    }

    .w200 {
      width: 200px;
    }
    .flex_align {
      display: flex;
      align-items: center;
    }
  }
</style>
